Instituto Federal de São Paulo (IFSP) Campus Bragança Paulista/SP Análise e Desenvolvimento de Sistemas (ADS) 5o. módulo Profa. Ana Paula Müller Giancoli paulagiancoli@ifsp.edu.br |
function nomeFunção([argumentos])) {
... declarações
};
// ****************************
// Criando de forma literal
// ****************************
let corOlhos = "azul";
function resetarCor() {
corOlhos = "";
};
console.log(corOlhos);
resetarCor();
console.log(corOlhos);
// ****************************
// Armazenando em uma variável
// ****************************
let corOlhos = "azul";
const funcao2 = function resetarCor() {
return corOlhos = "";
};
console.log(corOlhos);
console.log("Função2: ", funcao2.resetarCor);
console.log(funcao2.corOlhos);
// Outro exemplo
let y = function() {
...
};
// ****************************
// Armazenando em um array
// ****************************
let a = [ function(a, b) {
return 1+b;
}, funcao1, funcao2];
// ****************************
// Armazenando em um atributo de um objeto
// ****************************
const obj = {}
obj.mostrar = function() {
return "Hello";
};
console.log(obj.mostrar());
// ****************************
// Passando uma função como parâmetro
// ****************************
function correr(funcao) {
funcao()
}
correr(function() { console.log('Correndo...') });
// ****************************
// Uma função pode retornar/conter uma função
// ****************************
function soma(a, b) {
return function(c) {
console.log(a + b + c);
}
};
soma(2, 3)(4);
// ****************************
// Parâmetros e retornos são opcionais - Usando template string ${ }
// ****************************
function area(larg, alt) {
const area = larg * alt;
if (area > 20) {
console.log(`Valor ${area}m2 acima do permitido!`);
} else {
return area;
}
}
console.log(area(2,2));
console.log(area(2));
console.log(area());
console.log(area(2, 3, 22, 44, 55));
console.log(area(5, 5));
// ****************************
// Parâmetros variáveis
// ****************************
function soma() {
let soma = 0;
for (i in arguments) {
soma += arguments[i];
}
return soma;
}
console.log(soma(1, 2, 3));
console.log(soma(1.1, 2.3, 3.6));
console.log(soma());
console.log(soma(1));
console.log(soma(1, 2, "Teste"));
// **********Exemplo 1******************
let mult = function(a) {
return 2 * a;
}
console.log(mult(2)) // 4
// **********Exemplo 2******************
mult = (a) => {
return 2 * a;
}
console.log(mult(5));
// **********Exemplo 3******************
mult = a => 2 * a
a => 2 * a
console.log(mult(4));
// Sem arrow funtcion
const nomes = [
{id: 1, nome: "Ana"},
{id: 2, nome: "Paula"},
{id: 3, nome: "Ana"}
];
console.log(nomes.find(function(nome){
return nome.nome === 'Ana'
}));
// Com arrow function
const nomes = [
{id: 1, nome: "Ana"},
{id: 2, nome: "Paula"},
{id: 3, nome: "Ana"}
];
console.log(nomes.find((nome) => {
return nome.nome === 'Ana'
}));
// Se for somente um parâmetro, pode remover os parenteses.
console.log(nomes.find(nome => {
return nome.nome === 'Ana'
}));
// Ou ainda
console.log(nomes.find(nome => nome.nome === 'Ana');
// caso não tivesse parâmetro, utilizar parênteses vazios
console.log(nomes.find(() => nome.nome === 'Ana');
Para aprofundamento do assunto, consulte Pedro Araújo - Funções imediatas JavaScript (IIFE).
De acordo com [Pedro Araujo], " IIFE significa Immediately-invoked function expression ".
Por que usar funções imediatas?
Sintaxe:
(function(){})();
// Exemplo 1
(function(){
let nome = prompt("Indique seu nome: ");
let x = 'Seja bem vindo,';
console.log(x, nome);
})();
maximo = prompt("Indique o numero: ");
exibirPrimo(maximo);
function exibirPrimo(maximo) {
console.log("** Números primos entre 0 e", maximo, "**");
for (let numero=2; numero <= maximo; numero++) {
if (numeroPrimo(numero)) console.log(numero);
}
}
function numeroPrimo(numero) {
for (let divisor = 2; divisor < numero; divisor++) {
if (numero % divisor === 0) {
return false;
}
}
return true;
}
const nome = prompt("Informe seu nome completo: ")
let endereco = {
logradouro : prompt("Indique o nome da rua: "),
numero : prompt("Indique o número: "),
bairro : prompt("Indique o bairro: "),
cidade : prompt("Indique cidade: "),
}
function exibir(nome, endereco) {
console.log(nome);
for (let chave in endereco)
console.log(chave, endereco[chave]);
}
exibir(nome, endereco);
// Funcão criarCelular, com hardcode.
function criarCelular() {
const celular = {
marcaCelular: 'ASUS',
tamanhoTela: {
vertical: 155,
horizontal: 75
},
capacidadeBateria: 5000,
ligar: function() {
console.log("Efetuando a ligação ...")
}
}
return celular;
}
criarCelular();
console.log(celular);
// Funcão criarCelular, sem hardcode, usando padrão Factory Function.
function criarCelular(marcaCelular, tamanhoTela, capacidadeBateria) {
return {
marcaCelular,
tamanhoTela,
capacidadeBateria,
ligar() {
console.log("Efetuando a ligação ...");
}
}
}
const celular1 = criarCelular('Zenfone', 5.5, 5000)
console.log(celular1);
Até o momento utilizamos a escrita com o padrão de Camel case (umDoisTres).
Observação: Para Construct Functions, utiliza-se o Pascal case (UmDoisTres).
// Construct Functions
function Celular(marcaCelular, tamanhoTela, capacidadeBateria) {
this.marcaCelular = marcaCelular,
this.tamanhoTela = tamanhoTela,
this.capacidadeBateria = capacidadeBateria,
this.ligar = function() {
console.log("Efetuando ligação ...")
}
}
const celular = new Celular('Zenfone', 5.5, 5000)
console.log(celular);
// Construtor de Função
function Endereco(endereco) {
this.logradouro = endereco.logradouro,
this.numero = endereco.numero,
this.bairro = endereco.bairro,
this.cidade = endereco.cidade
}
// variável endereco1
let endereco1 = new Endereco({
logradouro : prompt("Indique o nome da rua: "),
numero : prompt("Indique o número: "),
bairro : prompt("Indique o bairro: "),
cidade : prompt("Indique cidade: "),
});
// variável endereco2
let endereco2 = new Endereco({
logradouro : 'Avenida das margaridas',
numero : '1987',
bairro : 'Vila das Flores',
cidade : 'Bragança Paulista'
});
// funcao para verificar se os endereços são iguais
function saoIguais(endereco1, endereco2) {
// comparando propriedades
return endereco1.logradouro === endereco2.logradouro &&
endereco1.cidade === endereco2.cidade &&
endereco1.numero === endereco2.numero
}
console.log(saoIguais(endereco1, endereco2)) // true: endereços possuem valores iguais. Digitei mesmos valores.
// Saída: true
function enderecoReferencia(endereco1, endereco2) {
// comparando endereco de memoria - referencia
return endereco1 === endereco2
}
console.log(enderecoReferencia(endereco1, endereco2)) // false: aponta para endereco de memoria diferentes
// Saída: false
// variável endereco3
const endereco3 = endereco1;
function enderecoReferencia1(endereco1, endereco3) {
// comparando endereco de memoria - referencia
return endereco1 === endereco3
}
console.log(enderecoReferencia1(endereco1, endereco3)) // true: aponta para o mesmo endereco de memoria
// Saída: true
// criando o objeto
let x = 0;
let continuar = prompt("Deseja postar? S-Sim, N-Não: ").toUpperCase;
while (continuar != 'N') {
let postagem = {
titulo: prompt("Indique o título da postagem: "),
mensagem: prompt("Informe a mensagem: "),
autor: prompt("Indique o autor: ") ,
visualizacoes: x +=1,
comentarios: [
{ autor: prompt("Indique autor comentário1: "), mensagem: prompt("Informe a mensagem1: ")},
{ autor: prompt("Indique autor comentário2: "), mensagem: prompt("Informe a mensagem2: ")},
],
estado: true
};
console.log(postagem);
continuar = prompt("Deseja postar? S-Sim, N-Não: ").toUpperCase;
}
let faixas1 = [
{
tooltip : 'até R$ 700',
minimo : 0,
maximo : 700,
},
{
tooltip : 'R$ 700 até R$ 1000',
minimo : 700,
maximo : 1000,
},
{
tooltip : 'acima de R$ 1000',
minimo : 1000,
maximo : 9999999999,
}
];
console.log(faixas1);
// Resolvendo com
// Usando Factory Function
function criarFaixaPreco(tooltip, minimo, maximo) {
return {
tooltip,
minimo,
maximo
}
}
let faixas2 = [
criarFaixaPreco('até R$ 700', 0, 700),
criarFaixaPreco('R$ 700 até R$ 1000', 700, 1000),
criarFaixaPreco('acima de R$ 1000', 1000, 9999999999),
]
console.log(faixas2);
// Resolvendo com
// Usando Contructor
function FaixaPrecos(tooltip, minimo, maximo) {
this.tooltip = tooltip,
this.minimo = minimo,
this.maximo = maximo
}
let faixas3 = new FaixaPrecos('até R$ 700', 0, 700)
console.log(faixas3);
let faixas4 = new FaixaPrecos('R$ 700 até R$ 1000', 700, 1000)
console.log(faixas4);
let faixas5 = new FaixaPrecos('acima de R$ 1000', 1000, 9999999999)
console.log(faixas5);
let faixas1 = [
{
tooltip : 'até R$ ',
minimo : 0,
maximo : prompt("Indique o valor máximo: "),
},
{
tooltip : 'R$ ',
minimo : 500,
maximo : prompt("Indique o valor máximo para segunda pesquisa: "),
},
{
tooltip : 'acima de R$ ',
minimo : 1000,
maximo : 9999999999,
}
];
faixas1[0].tooltip += String(faixas1[0].maximo);
faixas1[1].tooltip += String(faixas1[0].maximo) + ' até R$ '+ String(faixas1[1].maximo);
faixas1[1].minimo = faixas1[0].maximo;
faixas1[2].tooltip += String(faixas1[1].maximo);
faixas1[2].minimo = faixas1[1].maximo;
console.log(faixas1);
<!-- Clique em qualquer lugar -->
<p>Click this document to activate the handler.</p>
<script>
window.addEventListener("click", () => {
console.log("Você clicou?");
});
</script>
<!-- Clique do botao -->
<button>Clique</button>
<p>No handler here.</p>
<script>
let button = document.querySelector("button");
button.addEventListener("click", () => {
console.log("Botão selecionado.");
});
</script>
<!-- Clique feito uma única vez -->
<button>Clique único</button>
<script>
let button = document.querySelector("button");
function once() {
console.log("Feito.");
button.removeEventListener("click", once);
}
button.addEventListener("click", once);
</script>
<!-- Clique feito com cada um dos botões do mouse -->
<button>Clique com um dos botões do mouse</button>
<script>
let button = document.querySelector("button");
button.addEventListener("mousedown", (event) => {
if (event.button == 0) {
console.log("Botão esquerdo");
} else if (event.button == 1) {
console.log("Botão meio");
} else if (event.button == 2) {
console.log("Botão direito");
}
});
</script>
<!-- Qual botão foi clicado -->
<button>A</button>
<button>B</button>
<button>C</button>
<script>
document.body.addEventListener("click", (event) => {
if (event.target.nodeName == "BUTTON") {
console.log("Clicou", event.target.textContent);
}
});
</script>
<!--
Para a maioria dos tipos de eventos, os manipuladores de eventos JavaScript são chamados antes que o comportamento padrão ocorra. Se o manipulador não quiser que esse comportamento normal aconteça, normalmente porque já cuidou de manipular o evento, ele pode chamar o preventDefault método no objeto de evento.
-->
<a href="https://developer.mozilla.org/" target="_blank">MDN</a>
<script>
let link = document.querySelector("a");
link.addEventListener("click", (event) => {
console.log(“Não executou.”);
event.preventDefault();
});
</script>
<!-- Alterna de cor ao manter um letra pressionada -->
<p>Esta página alterna para cor violeta ao manter pressionado a letra V.</p>
<script>
window.addEventListener("keydown", (event) => {
if (event.key == "v") {
document.body.style.background = "violet";
}
});
window.addEventListener("keyup", (event) => {
if (event.key == "v") {
document.body.style.background = "";
}
});
</script>
<!-- Conforme a tecla pressionada -->
<p>Pressione CTRL + barra de espaço.</p>
<script>
window.addEventListener("keydown", (event) => {
if (event.key == " " && event.ctrlKey) {
console.log("Continue!");
}
});
</script>
<!-- Marque os pontos com o clique do mouse -->
<style>
body {
height: 200px;
background: beige;
}
.dot {
height: 8px;
width: 8px;
border-radius: 4px; /* cantos arredondados */
background: blue;
position: absolute;
}
</style>
<script>
window.addEventListener("click", (event) => {
let dot = document.createElement("div");
dot.className = "dot";
dot.style.left = event.pageX - 4 + "px";
dot.style.top = event.pageY - 4 + "px";
document.body.appendChild(dot);
});
</script>
<!-- Arraste o bloco para ver a movimentacao -->
<p>
Clique e mantenha pressionado e arraste pra ver a modificação de largura
da barra.
</p>
<div style="background: orange; width: 60px; height: 20px;"></div>
<script>
let lastX; // Tracks the last observed mouse X position
let bar = document.querySelector("div");
bar.addEventListener("mousedown", (event) => {
if (event.button == 0) {
lastX = event.clientX;
window.addEventListener("mousemove", moved);
event.preventDefault(); // Prevent selection
}
});
function moved(event) {
if (event.buttons == 0) {
window.removeEventListener("mousemove", moved);
} else {
let dist = event.clientX - lastX;
let newWidth = Math.max(10, bar.offsetWidth + dist);
bar.style.width = newWidth + "px";
lastX = event.clientX;
}
}
</script>
<!-- Uso de barra de progresso na parte superior a medida que rola o scroll -->
<style>
#progress {
border-bottom: 6px solid blue;
width: 0;
position: fixed;
top: 0;
left: 0;
}
</style>
<div id="progress"></div>
<script>
// Create some content
document.body.appendChild(
document.createTextNode("Diversas linhas ".repeat(1000))
);
let bar = document.querySelector("#progress");
window.addEventListener("scroll", () => {
let max = document.body.scrollHeight - innerHeight;
bar.style.width = `${(pageYOffset / max) * 100}%`;
});
</script>
<!-- Indicação do que deve ser digitado -->
<p>Nome: <input type="text" data-help="Seu nome" /></p>
<p>Idade: <input type="text" data-help="Sua idade" /></p>
<p id="help"></p>
<script>
let help = document.querySelector("#help");
let fields = document.querySelectorAll("input");
for (let field of Array.from(fields)) {
field.addEventListener("focus", (event) => {
let text = event.target.getAttribute("data-help");
help.textContent = text;
});
field.addEventListener("blur", (event) => {
help.textContent = "";
});
}
</script>
<!-- Indicação do conteúdo do nome digitado -->
<p>Nome: <input type="text" data-help="Seu nome" id="input" /></p> <---- Adicionado id="input"
<p>Idade: <input type="text" data-help="Sua idade" /></p>
<p id="help"></p>
<p><span id="result"></span></p> <---- Adicionado
<script>
<!-- Adicionado -->
input.oninput = function () {
result.innerHTML = input.value;
};
<!-- Fim Adicionado -->
let help = document.querySelector("#help");
let fields = document.querySelectorAll("input");
for (let field of Array.from(fields)) {
field.addEventListener("focus", (event) => {
let text = event.target.getAttribute("data-help");
help.textContent = text;
});
field.addEventListener("blur", (event) => {
help.textContent = "";
});
}
</script>
<!-- Contagem com setInterval -->
<script>
let ticks = 0;
let clock = setInterval(() => {
console.log("tick", ticks++);
if (ticks == 10) {
clearInterval(clock);
console.log("stop.");
}
}, 200);
</script>
<script>
window.onload = function() { // same as window.addEventListener('load', (event) => {
alert('Page loaded');
// image is loaded at this time
alert(`Image size: ${img.offsetWidth}x${img.offsetHeight}`);
};
</script>
<img id="img" src="https://en.js.cx/clipart/train.gif?speed=1&cache=0">
Math.random()
Math.max(2,5,8,10,4)
Math.min(10,3,15,18)
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let context = canvas.getContext("2d");
// Inserir seu código js aqui
};
| Nome Função | Descrição | Retorno |
|---|---|---|
| clearRect(a, b, c, d) | Limpa um retângulo específico. | Não há retorno algum. |
| fillRect(a, b, c, d) | Desenha um retângulo preenchido. | Não há retorno algum. |
| strokeRect(a, b, c, d) | Desenha um retângulo não preenchido. | Não há retorno algum. |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let x = 10;
let y = 50;
let count = 5;
for (let i = 0; i < count; i++) {
ctx.fillRect(i * (x + y) + x, x, y, y);
ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
ctx.clearRect(i * (x + y) + x, x + 5, y, y - 10);
}
};
Saída:
| Nome Função | Descrição | Valores padrões |
|---|---|---|
| fillStyle | Define o estilo utilizado para preencher as formas. | black |
| lineJoin | Define o estilo utilizado para uniões de linhas. | miter |
| lineWidth | Define a espessura das linhas. | 1.0 |
| strokeStyle | Define o estilo utilizado para linhas. | black |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
ctx.lineWidth = 4;
ctx.strokeRect(10, 10, 50, 50);
ctx.lineWidth = 6;
ctx.strokeRect(70, 10, 50, 50);
ctx.lineWidth = 8;
ctx.strokeRect(130, 10, 50, 50);
ctx.lineWidth = 10;
ctx.strokeRect(190, 10, 50, 50);
};
Saída:
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
ctx.lineWidth = 20;
ctx.lineJoin = "round";
ctx.strokeRect(20, 20, 100, 100);
ctx.lineJoin = "bevel";
ctx.strokeRect(160, 20, 100, 100);
ctx.lineJoin = "miter";
ctx.strokeRect(300, 20, 100, 100);
};
Saída:
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let x = 10;
let y = 50;
let count = 5;
ctx.lineWidth = 3;
let interiorCores = ["black", "blue", "gray", "red", "green"];
let linhasCores = ["rgb(0, 0, 0)", "rgb(100, 100, 100)", "rgb(0, 0, 255)", "rgb(255, 0, 0)", "rgb(0, 255, 0)"];
for (let i = 0; i < count; i++) {
ctx.fillStyle = interiorCores[i];
ctx.strokeStyle = linhasCores[i];
ctx.fillRect(i * (x + y) + x, x, y, y);
ctx.strokeRect(i * (x + y) + x, (2 * x) + y, y, y);
};
Saída:
| Nome Função | Descrição | Retorno |
|---|---|---|
| createLinearGradient(x0, y0, x1, y1) | Cria um gradiente linear. | CanvasGradient |
| createRadialGradient(x0, y0, r0, x1, y1, r1) | Cria um gradiente radial. | CanvasGradient |
| addColorStop(position, cor) | Adiciona cores sólidas a linhas gradientes. | Não retorna nada. |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let gradiente = ctx.createLinearGradient(0, 0, 500, 140);
gradiente.addColorStop(0, "green");
gradiente.addColorStop(0.3, "blue");
gradiente.addColorStop(0.5, "white");
gradiente.addColorStop(0.7, "orange");
gradiente.addColorStop(1, "red");
ctx.fillStyle = gradiente;
ctx.fillRect(0, 0, 500, 140);
};
Saída:
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let gradiente = ctx.createRadialGradient(250, 70, 20, 200, 60, 100);
gradiente.addColorStop(0, "green");
gradiente.addColorStop(0.3, "blue");
gradiente.addColorStop(0.5, "white");
gradiente.addColorStop(0.7, "orange");
gradiente.addColorStop(1, "red");
ctx.fillStyle = gradiente;
ctx.fillRect(0, 0, 500, 140);
};
Saída:
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let gradiente = ctx.createLinearGradient(250, 70, 200, 160);
gradiente.addColorStop(0, "green");
gradiente.addColorStop(0.3, "blue");
gradiente.addColorStop(0.5, "white");
gradiente.addColorStop(0.7, "orange");
gradiente.addColorStop(1, "red");
ctx.fillStyle = gradiente;
ctx.fillRect(150, 20, 75, 100);
ctx.lineWidth = 8;
ctx.strokeStyle = gradiente;
ctx.strokeRect(250, 20, 75, 100);
let gradienteR = ctx.createRadialGradient(250, 150, 20, 200, 100, 100);
gradienteR.addColorStop(0, "green");
gradienteR.addColorStop(0.3, "blue");
gradienteR.addColorStop(0.5, "white");
gradienteR.addColorStop(0.7, "orange");
gradienteR.addColorStop(1, "red");
ctx.fillStyle = gradienteR;
ctx.fillRect(150, 150, 75, 100);
ctx.lineWidth = 8;
ctx.strokeStyle = gradienteR;
ctx.strokeRect(250, 150, 75, 100);
};
Saída:
| Nome Função | Descrição |
|---|---|
| createPattern(imagem, repeticao) | Cria um padrão conforme a imagem passada. |
| repeat | A imagem será repetida na vertical e horizontal. |
| repeat-x | A imagem será repetida somente na horizontal. |
| repeat-y | A imagem será repetida somente na vertical. |
| no-repeat | A imagem será repetida não será repetida. |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<img src="bola.jpg" hidden id="bola"> <!-- Adicionado -->
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let imagemElemento = document.getElementById("bola");
let padrao = ctx.createPattern(imagemElemento, "repeat"); /* propriedade a ser modificada */
ctx.fillStyle = padrao;
ctx.fillRect(0, 0, 500, 140);
};
Saída:
let padrao = ctx.createPattern(imagemElemento, "repeat");
let padrao = ctx.createPattern(imagemElemento, "repeat-x");
let padrao = ctx.createPattern(imagemElemento, "repeat-y");
let padrao = ctx.createPattern(imagemElemento, "no-repeat");
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<img src="bola.jpg" hidden id="bola"> <!-- Adicionado -->
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let imagemElemento = document.getElementById("bola");
let padrao = ctx.createPattern(imagemElemento, "repeat");
ctx.fillStyle = padrao;
ctx.fillRect(50, 16, 180, 165);
ctx.lineWidth = 20;
ctx.strokeStyle = padrao;
ctx.strokeRect(350, 20, 175, 150);
};
Saída:
| Nome Função | Descrição |
|---|---|
| save() | Salva os valores para as propriedades do estado do desenho e os organiza na pilha de estados. |
| restore() | Pega o primeiro conjunto de valores da pilha de estados e os utiliza para definir o estado de desenho. |
<!-- Arquivo index.html -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="578" height="300"></canvas>
<div> <!-- Adicionado -->
<button>Save</button> <!-- Adicionado -->
<button>Restore</button> <!-- Adicionado -->
</div> <!-- Adicionado -->
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css */
canvas {
border: thin solid black;
margin: 5px;
}
/* Arquivo js.js */
window.onload = function () {
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
/* Inserir seu código aqui */
let gradiente = ctx.createLinearGradient(500, 0, 500, 140);
gradiente.addColorStop(0, "green");
gradiente.addColorStop(0.3, "blue");
gradiente.addColorStop(0.5, "white");
gradiente.addColorStop(0.7, "orange");
gradiente.addColorStop(1, "red");
let interiorCores = ["black", gradiente, "blue", "gray", "red", "green", "grey"];
let indexador = 0;
ctx.fillStyle = interiorCores[indexador];
draw();
let botoes = document.getElementsByTagName("button");
for (let i = 0; i < botoes.length; i++) {
botoes[i].onclick = botaoPress;
}
function botaoPress(e) {
switch (e.target.innerHTML) {
case 'Save':
ctx.save();
indexador = (indexador + 1) % interiorCores.length;
ctx.fillStyle = interiorCores[indexador];
draw();
break;
case 'Restore':
indexador = Math.max(0, indexador-1);
ctx.restore();
draw();
break;
}
}
function draw() {
ctx.fillRect(0, 0, 500, 140);
}
};
Saída:
| Nome Função | Descrição |
|---|---|
| drawImage(imagem, x, y) | Desenha a imagem a partir das coordenadas (x, y). |
| Existem outras combinações para drawImage(). Os 3o. e 4o. parâmetros opcionais do método drawImage() controlam a escala da imagem. |
<!-- Arquivo index.html - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body> <!-- Modificado! -->
<video id="vid" src="timessquare.webm" controls preload="auto" width="360" height="240"></video>
<div>
<button id="pressme">Tirar Foto</button>
</div>
<canvas id="myCanvas" width="360" height="240"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css - Modificado */
canvas {
border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
float: left;
}
/* Arquivo js.js - Modificado */
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let imagemElemento = document.getElementById("vid");
/* Inserir seu código aqui */
document.getElementById("pressme").onclick = function (e) {
ctx.drawImage(imagemElemento, 0, 0, 360, 238);
}
};
Saída:
<!-- Arquivo index.html - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body> <!-- Modificado! -->
<video id="vid" src="timessquare.webm" controls auto width="360" height="240"></video>
<canvas id="myCanvas" width="360" height="240"></canvas>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css - Modificado */
canvas {
border: thin solid black;
}
/* elementos filhos diretos do elemento body receberão esta configuração */
body > * {
float: left;
}
/* Arquivo js.js - Modificado */
let canvas = document.getElementById("myCanvas");
let ctx = canvas.getContext("2d");
let imagemElemento = document.getElementById("vid");
/* Inserir seu código aqui */
let width = 100;
let height = 10;
ctx.lineWidth = 5;
ctx.strokeStyle = "red";
setInterval(function () {
ctx.drawImage(imagemElemento, 0, 0, 360, 238);
ctx.strokeRect(180 - (width/2), 120 - (height/2), width, height);
}, 25);
setInterval(function () {
width = (width + 1) % 200;
height = (height + 3) % 200;
}, 100);
};
Saída:
<!-- Arquivo index.html - Modificado -->
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body> <!-- Modificado! -->
<div>
<video id="vid" src="timessquare.webm" controls autoplay width="360" height="240"></video>
</div>
<div>
<canvas id="myCanvas1" width="360" height="240"></canvas>
<button id="pressme">Foto</button>
<canvas id="myCanvas2" width="360" height="240"></canvas>
</div>
<script src="js/js.js"></script>
</body>
</html>
/* Arquivo estilo.css - Modificado */
canvas {
border: thin solid black;
}
body {
display: flex;
flex-direction: column;
align-items: center;
}
/* Arquivo js.js - Modificado */
let srcCanvas = document.getElementById("myCanvas1");
let ctx1 = srcCanvas.getContext("2d");
let ctx2 = document.getElementById("myCanvas2").getContext("2d");
let imagemElemento = document.getElementById("vid");
document.getElementById("pressme").onclick = takePicture;
/* Inserir seu código aqui */
let width = 100;
let height = 10;
ctx1.lineWidth = 5;
ctx1.strokeStyle = "red";
ctx2.lineWidth = 30;
ctx2.strokeStyle = "black";
setInterval(function () {
ctx1.drawImage(imagemElemento, 0, 0, 360, 240);
ctx1.strokeRect(180 - (width/2), 120 - (height/2), width, height);
}, 25);
setInterval(function () {
width = (width + 1) % 200;
height = (height + 3) % 200;
}, 100);
function takePicture() {
ctx2.drawImage(srcCanvas, 0, 0, 360, 240);
ctx2.strokeRect(0, 0, 360, 240);
}
};
Saída:
| Nome Função | Descrição |
|---|---|
| beginPath() | Inicia um novo caminho. |
| closePath() | Fecha um caminho existente da primeira linha desenhada até a última. |
| fill() | Preenche as formas de subpaths. |
| isPointInPath(x, y) | Retorna verdadeiro se o ponto existe no caminho da forma desenhada. |
| lineTo(x, y) | Desenha uma subPath com as coordenadas indicadas. |
| moveTo(x, y) | Posiciona o cursor na coordenada especidicada. |
| rect(x, y, w, z) | Desenha um retângulo com início nos pontos (x, y), e com final nas coordenadas (w, z). |
| stroke() | Desenha a linha externa das formas. |
| Nome Função | Descrição |
|---|---|
| font = "bold 12px sans-serif" | Pode ser qualquer coisa que você colocaria na regra font do CSS. Incluindo font style, font variant, font weight, font size, line height, e font family. |
| textAlign = "right" | Controla o alinhamento do texto. É parecido (mas não idêntico) a regra text-align do CSS. Os possíveis valores são start, end, left, right, e center. |
| textBaseline = "bottom" | Controla onde o texto é desenhado relativo ao ponto de início. Os possíveis valores são top, hanging, middle, alphabetic, ideographic, ou bottom. |
| fillText(conteudo, posicao x, posicao y) | desenha o texto de fato. |
<!-- Arquivo index.html - Modificado -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Desenhando com Canvas</title>
<link rel="stylesheet" href="css/estilo.css">
</head>
<body>
<canvas id="myCanvas" width="500" height="600">Sem suporte a canvas</canvas>
<script src="js/js1.js"></script>
</body>
</html>
/* Arquivo estilo.css - Modificado */
#myCanvas {
border : 10px solid #555
}
/* Arquivo js.js - Modificado */
let canvas = document.getElementById("myCanvas1");
let ctx = canvas.getContext("2d");
//Desenhando linhas verticais
for (let x = 0.5; x < 500; x += 10)
{
ctx.moveTo(x, 0);
ctx.lineTo(x, 600);
}
//Desenhando linhas horizontais
for (let y = 0.5; y < 600; y += 10)
{
ctx.moveTo(0, y);
ctx.lineTo(600, y);
}
ctx.strokeStyle = "#eee";
ctx.stroke();
// Desenhando uma seta na Horizontal
ctx.beginPath();
ctx.moveTo(0, 40);
ctx.lineTo(240, 40);
ctx.moveTo(260, 40);
ctx.lineTo(500, 40);
ctx.moveTo(495, 35);
ctx.lineTo(500, 40);
ctx.lineTo(495, 45);
// Desenhando uma seta na Vertical
ctx.moveTo(60, 0);
ctx.lineTo(60, 153);
ctx.moveTo(60, 173);
ctx.lineTo(60, 375);
ctx.moveTo(65, 370);
ctx.lineTo(60, 375);
ctx.lineTo(55, 370);
ctx.strokeStyle = "#000";
ctx.stroke();
//Desenhando x, y, e as coordenadas
ctx.font = "bold 12px sans-serif";
ctx.fillText("x", 248, 43);
ctx.fillText("y", 58, 165);
ctx.textBaseline = "top";
ctx.fillText("( 0 , 0 )", 8, 5);
ctx.textAlign = "right";
ctx.textBaseline = "bottom";
ctx.fillText("( 500 , 375 )", 492, 370);
};
Saída:
<!-- Arquivo index.xml -->
<?xml version="1.0"?>
<!-- XML demonstration -->
<?xml-stylesheet type="text/css" href="estilo.css"?>
<!DOCTYPE planet>
<planet>
<ocean>
<name>Arctic</name>
<area>13,000</area>
<depth>1,200</depth>
</ocean>
<ocean>
<name>Atlantic</name>
<area>87,000</area>
<depth>3,900</depth>
</ocean>
<ocean>
<name>Pacific</name>
<area>180,000</area>
<depth>4,000</depth>
</ocean>
<ocean>
<name>Indian</name>
<area>75,000</area>
<depth>3,900</depth>
</ocean>
<ocean>
<name>Southern</name>
<area>20,000</area>
<depth>4,500</depth>
</ocean>
</planet>
/* Arquivo estilo.css */
/* ** XML demonstration ** */
planet:before {
display: block;
width: 8em;
font-weight: bold;
font-size: 200%;
content: "Oceans";
margin: -.75em 0px .25em -.25em;
padding: .1em .25em;
background-color: #cdf;
}
planet {
display: block;
margin: 2em 1em;
border: 4px solid #cdf;
padding: 0px 1em;
background-color: white;
}
ocean {
display: block;
margin-bottom: 1em;
}
name {
display: block;
font-weight: bold;
font-size: 150%;
}
area {
display: block;
}
area:before {
content: "Area: ";
}
area:after {
content: " million km\B2";
}
depth {
display: block;
}
depth:before {
content: "Mean depth: ";
}
depth:after {
content: " m";
}
Saída:
ADS - HTML5, CSS3, JS - 5o. módulo.
Modelo e formato elaborado por profa. Ana Paula Müller Giancoli - BSD 2-Clause License. - Julho.2021.